import React, { Component } from 'react'
import {getArtLists, delArt} from 'api'
import { Card, Button ,Table, Image, Tooltip, Tag, Modal,message } from 'antd' 
import { FileWordOutlined , ExclamationCircleOutlined  } from '@ant-design/icons'
import {filterStr} from 'utils'
import moment from 'moment'
import XLSX from 'xlsx'
export default class ArtList extends Component {
  constructor(){
    super();
    this.state = {
      data:[],
      total:0,
      artLists:[],
      page:1,
      pageSize:10,
      total:0,
      columns:[
        {
          title:'序号',
          dataIndex: 'id',
          key:'id'
        },
        {
          title:'标题',
          dataIndex: 'title',
          key:'title'
        },
        {
          title:'作者',
          dataIndex: 'author',
          key:'author'
        },
        {
          title:'描述',
          render: (row)=>{
             return (
             <Tooltip title={row.desc} color="#9f5f80">
                <span> 
                  {filterStr(row.desc)}
                </span>
             </Tooltip>
            )
                
          },
          key:'desc'
        },
        {
          title:'封面图片',
          render:(row)=>{
             return (
                <Image src={row.thumb}/>
             )
          },
          key:'thumb'
        },
        {
          title:'创建时间',
          render: (row)=>{
            return moment(row.createAt).format("YYYY-MM-DD")
          },
          key:'createAt'
        },
        {
          title:'阅读次数',
          render:(row)=>{
            return (
              <Tag color={ row.readCount>500?'#ff4646':'#4e8d7c' }>
                {row.readCount}
              </Tag>
            )
          },
          key:'readCount'
        },
        {
          title:'操作',
          render:(row)=>{
            return (
              <div>
                <Button 
                  type="primary" 
                  onClick = {()=>{
                    this.props.history.push(`/admin/artEdit/${row.id}`)
                  }}
                  size="small">编辑</Button>
                <Button onClick= {
                  ()=>{ this.delArt(row.id) }
                } danger size="small">删除</Button>
              </div>
            )
          },
          key:"action"
        }
      ]
    }
  }
  render() {
    return (
      <Card title={
        <div>
          <span>文章列表</span>
          <Button  
            onClick={ ()=>{
              this.props.history.push('/admin/artAdd')
            } }
            style={{marginLeft:20}} type="primary">增加文章</Button>
        </div>
      }
        extra={ <Button 
          shape="round" 
          onClick={ this.exportFile }
          icon={<FileWordOutlined/>}>导出</Button> }
      >
        
        <Table pagination={{
          current: this.state.page,
          pageSize: this.state.pageSize,
          total:this.state.total,
          onChange: this.pageChange 
        }} dataSource={this.state.artLists} columns={this.state.columns} />
      </Card>
    )
  }
  componentDidMount(){
    this.fetchArt()
  }
  delArt = (id)=>{
    // 删除文章
     Modal.confirm({
        title: '删除',
        icon: <ExclamationCircleOutlined />,
        content: '您确认删除吗',
        okText: '确认',
        cancelText: '取消',
        onOk:()=>{
          delArt(id).then(res=>{
            if(res.data.code === 200){
              message.success(res.data.msg,2, ()=>{
                this.props.history.go(0)
              })
            }
          })
        }
      })
  }
  initSheetData = ()=>{
    // 格式化 导出 excel数据
    // 处理表头
   const { artLists } = this.state;
   const keys = Object.keys(artLists[0])
   let data = [keys]
   artLists.forEach(art=>{
     data.push(Object.values(art))
   })
   this.setState({
     data
   })
  }
  exportFile = ()=>{
    // 导出excel
    const ws = XLSX.utils.aoa_to_sheet(this.state.data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
    XLSX.writeFile(wb, "文章列表.xlsx")
  }
  pageChange = (page, pageSize)=>{
    console.log(page,pageSize)
    this.setState({
      page,
      pageSize
    },()=>{
      // 重新获取下一页数据
      this.fetchArt()
    })
  }
  fetchArt = ()=>{
    getArtLists({
      page: this.state.page,
      pageSize:this.state.pageSize
    }).then(res=>{
      console.log(res)
      if(res.data.code === 200){
        this.setState({
          total: res.data.data.total,
          artLists: res.data.data.lists
        },()=>{
          this.initSheetData()
        })
      }
    })
  }
}
